<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <style>
        .select{
            display: inline-block;
            margin:20px auto;
        }
        .select>span{
            text-align: left;
        }
        .span-hover{
            border: 1px solid black;
            border-bottom: 0;
            background-color: antiquewhite;
            text-align: left;
        }
        .fa:last-child{
            display: none;
        }
        #box{
            display: none;
            margin: -1px 0 0 0;
            background-color: antiquewhite;
            text-align: left;
            width: 200px;
            border: 1px solid black;
        }
        .position-select{
            position: absolute;
            top: 0;
            left: 0;
        }
        
    </style>
</head>
<body>
    <div class="position-select">
        <div class="select">
            <span onmouseover="enterToUl()" onmouseleave="leaveToUl()">自强不息<span class="fa fa-toggle-down "></span><span class="fa fa-toggle-up"></span></span>
            <div id="box" onmouseover="enterToUl()" onmouseleave="leaveToUl()">
                <span>123</span>
                <span>456</span>
                <span>789</span>
            </div>
        </div>
    </div>
    <div>1111</div>
    <script>
        let ele;
        let toggleArr;
        let span;
        function enterToUl(){
            ele = document.getElementById('box');
            toggleArr = document.getElementsByClassName('fa');
            span = document.getElementsByTagName('span')[0];
            span.className = 'span-hover';
            ele.style.display = "block";
            toggleArr[0].style.display = "none";
            toggleArr[1].style.display = "inline";
        }
        function leaveToUl(){
            span.className = '';
            ele.style.display = "none";
            toggleArr[0].style.display = "inline";
            toggleArr[1].style.display = "none";
        }
        
    </script>
</body>
</html>